<script setup lang="ts">
import BaseAudience from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/BaseAudience.vue";
import {CrowdLabelInterface} from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/CrowdInterface";
import CrowdTopicTemplatePanel
  from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/CrowdTopicTemplatePanel.vue";
import DharmaJingXuan from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/DharmaJingXuan.vue";
import IndustryTargetedAudience
  from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/IndustryTargetedAudience.vue";
import LabelFindListCrowdPanel
  from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/LabelFindListCrowdPanel.vue";
import PinPaiDingXiang from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/PinPaiDingXiang.vue";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  materialIdList: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  campaignId: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  recSceneList: {
    type: Array as PropType<string[]>,
    default: () => ['recSceneNew'],
  },
});
const emit = defineEmits([
  "update:value",
]);
const crowd = ref<CrowdLabelInterface[]>([]);
const tabs = ref<any[]>(
    [
      {
        title: '宝贝定向人群',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000629"
          },
          {
            "labelId": "3000630"
          },
          {
            "labelId": "3000643"
          },
          {
            "labelId": "3000531"
          },
          {
            "labelId": "3000701"
          }
        ],
        value: [],
      },
      {
        title: '店铺定向人群',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000539"
          },
          {
            "labelId": "3000540"
          },
          {
            "labelId": "3000541"
          },
          {
            "labelId": "3000542"
          },
          {
            "labelId": "3000538"
          },
          {
            "labelId": "3000554"
          },
          {
            "labelId": "3000543"
          },
          {
            "labelId": "3000555"
          },
          {
            "labelId": "3000544"
          },
          {
            "labelId": "3000556"
          },
          {
            "labelId": "3000530"
          }
        ],
        value: [],
      }, {
      title: '行业定向人群',
      component: IndustryTargetedAudience,
      labelList: [],
      value: [],
    }, {
      title: '基础属性人群',
      component: BaseAudience,
      labelList: [],
      value: [],
    }, {
      title: '达摩盘平台精选人群',
      component: DharmaJingXuan,
      labelList: [],
      value: [],
    }, {
      title: '品牌定向人群',
      component: CrowdTopicTemplatePanel,
      labelList: [],
      topicId: '115',
      value: [],
    },
    ]
);
watch(() => tabs.value, (val) => {
  // 将所有tab下value合并
  let allValue: any[] = [];
  val.forEach((item: any) => {
    allValue = allValue.concat(item.value);
  });
  emit('update:value', allValue);
}, {
  deep: true,
});
const activeKey = ref(3);
</script>

<template>
  <!--{{tabs}}-->
  <a-tabs size="small" style="margin-top: -10px;" v-model:active-key="activeKey">
    <a-tab-pane v-for="(tab, index) in tabs" :key="index" :tab="tab.title">
      <component :is="tab.component" :labelList="tab.labelList" :bizCode="bizCode" :materialIdList="materialIdList"
                 :campaignId="campaignId" :recSceneList="recSceneList" v-model:value="tab.value" :topicId="tab.topicId"
      />
    </a-tab-pane>
  </a-tabs>
</template>

<style scoped>

</style>
